<template>
  <div class="interview-detail">
    <div class="tip-box" :class="[statusClassName]">
      <div class="user-icon-box">
        <span class="iconfont icon-renyuan user-icon"></span>
      </div>
      <div class="user-name-box">
        <div class="name-txt">{{ userInfo.name }}</div>
        <div class="user-posi-txt">{{ jobTip }}：{{ userInfo.ex }}</div>
      </div>
      <div class="user-resume-box">
        <span
          class="look-resume resume-txt"
          @click="lookResume(userInfo, 'show', '1', 'pdf')"
          >预览简历</span
        >
        <span class="look-resume resume-txt" @click="onDown(userInfo)">
          下载简历
        </span>
        <div class="down-box" v-show="false">
          <a
            class="down-btn"
            ref="downBtn"
            :href="downUrl"
            :download="downFileName"
          ></a>
        </div>
      </div>
    </div>
    <ul class="list-menu-box">
      <li
        class="menu-item"
        :class="[item.isActive ? 'is-active' : '']"
        @click.stop="changeTabTag"
        :data-info="JSON.stringify(item)"
        v-for="(item, index) in navs"
        :key="index"
      >
        {{ item.lable }}
      </li>
    </ul>
    <preview-Pdf-Or-Image></preview-Pdf-Or-Image>
  </div>
</template>
<script>
import bus from "./../../eventBus";
import PreviewPdfOrImage from "./../../components/PreviewPDFOrImage";
import { showOrDownFile } from "./../../assets/js/preOrDownFile";
import { downloadFile } from "./../../fetch/modules/common";
function fetchDownFile(store, opts) {
  return store.dispatch("FETCH_DOWN", opts);
}
export default {
  components: {
    PreviewPdfOrImage,
  },
  props: {
    userInfo: {
      type: Object,
      default: {},
    },
    navs: {
      type: Array,
      default: [],
    },
    jobTip: {
      type: String,
      default: "应聘岗位",
    },
    statusClassName: {
      type: String,
      default: "",
    },
    isShowUserStatus: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      downUrl: "",
      downFileName: "",
    };
  },
  mounted() {
    bus.$on("down-file", this.downFile);
  },
  methods: {
    downFile(url, name) {
      let self = this;
      this.downUrl = url;
      this.downFileName = name;
      window.setTimeout(function () {
        if (self.$refs.downBtn !== undefined) {
          self.$refs.downBtn.click();
        }
      }, 300);
    },
    changeTabTag(event) {
      let dom = _j(event.target);
      dom.siblings().removeClass("is-active");
      dom.addClass("is-active");
      let info = JSON.parse(dom.attr("data-info"));
      if (info) {
        bus.$emit("select-tab", info.val);
      }
    },
    lookResume(row, type, isSave, fileType) {
      if (!row.zz) {
        this.$message.warning("该候选人无简历信息");
        return;
      }
      showOrDownFile(row, type, isSave);
    },
    // * 下载
    onDown(row) {
      console.log(row)
      const fileUrl = row.zz || row.file_url;
      if (!fileUrl) {
        return this.$message.warning("该候选人无简历信息");
      }
      downloadFile(row.zz || row.file_url).then((res) => {
        const link = document.createElement("a");
        const blob = new window.Blob([res.data], {
          type: "application/pdf;charset=UTF-8",
        });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.download = `${row.fileName.replace('.pdf', '') || row.name}.pdf`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    _showMessage(msg, type, fn) {
      this.$message({
        showClose: false,
        message: msg,
        type: type,
        onClose: function () {
          if (fn instanceof Function) {
            fn && fn();
          }
        },
      });
    },
  },
};
</script>
<style lang="scss">
@import "~@/assets/scss/bilibili-theme.scss";
.interview-detail {
  background: $-bakcground-light;
}
.tip-box {
  width: 100%;
  text-align: center;
  height: auto;
  overflow: hidden;
  position: relative;
  background: #fff;
  .user-icon-box {
    width: 134px;
    height: 134px;
    border-radius: 50%;
    border: 8px solid $-bakcground-light;
    background-color: #fff;
    margin: 0px auto;
    margin-top: 25px;
    line-height: 80px;
    margin-bottom: 17px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    .user-icon {
      font-size: 96px;
      color: #feb368;
    }
  }
  .user-name-box {
    width: 100%;
    .name-txt {
      font-size: 22px;
    }
    .user-posi-txt {
      font-size: 14px;
      color: #636363;
    }
  }
  .user-resume-box {
    width: 100%;
    margin-bottom: 25px;
    .resume-txt {
      width: 88px;
      height: 34px;
      display: inline-block;
      line-height: 34px;
      margin-top: 20px;
      font-size: 14px;
      color: #fff;
      background-color: $-bakcground-primary;
      cursor: pointer;
      border-radius: 3px;
    }
    .resume-txt:first-child {
      margin-right: 18px;
    }
    .dowm-resume {
      margin-left: 25px;
    }
  }
}
.list-menu-box {
  width: 100%;
  height: auto;
  margin-top: 1px;
  overflow: hidden;
  background: $-bakcground-light;
  padding: 20px 10px 10px;
  box-sizing: border-box;
  .menu-item {
    // width: 100%;
    display: block;
    text-align: left;
    line-height: 40px;
    background-color: #fff;
    text-decoration: none;
    cursor: pointer;
    color: #636363;
    font-size: 14px;
    text-indent: 25px;
    border-bottom: 1px solid #ebeae6;
    margin-bottom: 4px;
    border-radius: 3px;
  }
  .menu-item:last-child {
    border-bottom: none;
  }
  .menu-item.is-active {
    background-color: $-bakcground-primary;
    color: #fff;
    font-weight: bold;
  }
}

.groom-box {
  width: 100%;
  margin-top: 20px;
  height: auto;
  padding-bottom: 15px;
  overflow: hidden;
  text-align: left;
  padding: 20px 10px 20px;
  box-sizing: border-box;
  border-radius: 3px;
  li {
    background: rgba(255, 255, 255, 0.55);
    &:last-child {
      padding-bottom: 15px;
    }
  }
  .groom-title {
    font-size: 14px;
    padding-top: 15px;
    text-indent: 25px;
    color: #b0b0b0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }
  .groom-item {
    padding-top: 15px;
    text-indent: 25px;
    font-size: 12px;
    color: #8f8d8a;
    &:last-child {
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
    }
    .g-icon {
      vertical-align: middle;
      color: #8f8d8a;
      font-size: 14px;
    }
  }
}
</style>
